<template>
	<view>
		<view class="bg-white flex align-stretch py-1" @click="$emit('click',title)">
			<view class="flex align-center justify-center py-2 px-3 ">
				<!-- <slot name="icon"></slot> -->
				<image class="rounded" :src="cover" v-if="cover" :style="getStyle" mode="widthFix"></image>
			</view>
			<view :class="borderBottom?'border-bottom':''" class="flex-1 flex align-center justify-between">
				<slot>
					<text class="font-md text-dark">{{title}}</text>
				</slot>
				<view class="flex align-center" v-if="showRight">
					<slot name="right" ></slot>
					<!-- 右箭头 -->
					<text class="iconfont icon-youjiantou font-md pr-3"></text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			//封面
			cover:{
				type:String,
				default:''
			},
			//标题
			title:{
				type:String,
				default:''
			},
			//有箭头的显示隐藏
			showRight:{
				type:Boolean,
				default:false
			},
			//右边下边框
			borderBottom:{
				type:Boolean,
				default:false
			},
			//图片大小
			size:{
				type:[String,Number],//数据类型 可能是字符串  也可能是数字
				default:60
			},
		},
		computed:{//通过计算属性  计算对应的宽高 简化组件
			getStyle(){
				return `width: ${this.size}rpx;height: ${this.size}rpx;`
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import '@/common/free.css';
	@import '@/common/common.css';
	@import '@/common/comicon.css';
</style>
